.containers {
  background-color: #ffffff;
  width: 100%;
  height: 80vh;
}

.canvas {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .bjs-powered-by {
  display: none !important;
}
/deep/ #sequenceflow-arrow-normal {
  path {
    fill: #ccc;
    stroke: #ccc;
  }
}
/deep/ #sequenceflow-arrow-activities {
  path {
    fill: #fdb039;
    stroke: #fdb039;
  }
}
/deep/ .djs-group {
  .djs-visual.running {
    path {
      display: none !important;
    }
    rect {
      fill: #1890ff !important;
      stroke: #1890ff !important;
    }
    .djs-label {
      font-weight: bold !important;
      fill: #fff !important;
    }
    // @media screen and (min-width: 1599px) {
    //   .djs-label {
    //     font-size: 11px !important;
    //   }
    // }
    // @media screen and (min-width: 768px) and(max-width: 1599px) {
    //   .djs-label {
    //     font-size: 12px !important;
    //   }
    // }
    // @media screen and (max-width: 768px) {
    //   .djs-label {
    //     font-size: 14px !important;
    //   }
    // }
  }

  .djs-connection {
    .Activities.djs-visual {
      path {
        display: block !important;
        stroke: #fdb039 !important;
        stroke-dasharray: 8 !important; //间隔多少像素绘制一次  虚线
        marker-end: url(#sequenceflow-arrow-activities) !important;
      }
    }
    .unActivities.djs-visual {
      path {
        display: block !important;
        stroke: #cccccc !important;
        stroke-dasharray: 8 !important;
        marker-end: url(#sequenceflow-arrow-normal) !important;
      }
    }
    // #sequenceflow-arrow-normal {
    //   fill: #fdb039 !important;
    // }
  }
  .djs-visual.Activities {
    path {
      display: none !important;
    }
    rect {
      fill: #fffcf8 !important;
      stroke: #fffcf8 !important;
    }
    .djs-label {
      font-weight: bold !important;
      fill: #fdb039 !important;
    }
    // @media screen and (min-width: 1599px) {
    //   .djs-label {
    //     font-size: 11px !important;
    //   }
    // }
    // @media screen and (min-width: 768px) and(max-width: 1599px) {
    //   .djs-label {
    //     font-size: 12px !important;
    //   }
    // }
    // @media screen and (max-width: 768px) {
    //   .djs-label {
    //     font-size: 14px !important;
    //   }
    // }
    // &.gateway-grey {
    //   path {
    //     display: block !important;
    //   }
    // }
  }
  .djs-visual.unActivities {
    // 去除默认图标
    path {
      display: none !important;
    }
    // 底色改变
    rect {
      fill: #f7f8fb !important;
      stroke: #f7f8fb !important;
    }
    // 文字样式改变
    .djs-label {
      font-weight: bold !important;
      fill: #202020 !important;
    }
    // @media screen and (min-width: 1599px) {
    //   .djs-label {
    //     font-size: 11px !important;
    //   }
    // }
    // @media screen and (min-width: 768px) and(max-width: 1599px) {
    //   .djs-label {
    //     font-size: 12px !important;
    //   }
    // }
    // @media screen and (max-width: 768px) {
    //   .djs-label {
    //     font-size: 14px !important;
    //   }
    // }
  }
  // .djs-connection path {
  //   stroke: #cccccc !important;
  //   marker-end: url(#sequenceflow-arrow-normal) !important;
  // }
  .gateway-grey {
    polygon,
    path {
      display: none;
    }
  }
  .djs-visual {
    .djs-label {
      fill: #333 !important;
    }
    circle {
      stroke: #cccccc !important;
    }
  }
}
